<template>
	<!-- 封装音乐列表组件 -->
	<el-table :data="list" style="width: 100%" size="mini" class="music-list" stripe v-if="isDisplay"
		@row-dblclick="playMusic" empty-text="当前没有音乐哦" tooltip-effect="light">
		<!-- 播放或序号 -->
		<el-table-column type="index" width="50">
			<template v-slot="scope">
				<span class="active-color" v-if="showCurren(scope.row.id)">
					<i v-if="isPlay" class="iconfont icon-shengyin"></i>
					<i v-else class="iconfont icon-shengyinwu"></i>
				</span>
				<span v-else style="color: #c3c3db">{{ scope.$index + 1 }}</span>
			</template>
		</el-table-column>
		<!-- 第二列 歌曲名 -->
		<el-table-column prop="name" label="音乐标题" show-overflow-tooltip>
			<template v-slot="{ row }">
				<span :class="{ 'active-color': showCurren(row.id) }">
					{{ row.name }}
				</span>
				<span style="color: #969697" v-if="row.alia.length !== 0">
					({{ row.alia[0] }})
				</span>
				<span v-if="row.fee == 1" class="vip-tag">VIP</span>
				<span v-if="row.mv !== 0" class="vip-tag pointer" @click="toMvDeTail(row.mv)"
					style="color: #ec4949; border-color: #ec4949">MV<i class="el-icon-caret-right"></i></span>
			</template>
		</el-table-column>
		<!-- 第二列 歌手 -->
		<el-table-column prop="ar[0].name" label="歌手" width="150">
			<template v-slot="{ row }">
				<span class="pointer artist-list" @click="toArtistDetail(a.id)" v-for="a in row.ar"
					:key="a.name">{{ a.name }}</span>
			</template>
		</el-table-column>
		<el-table-column prop="al.name" label="专辑名" width="200" show-overflow-tooltip v-if="!isPhone">
			<template v-slot="{ row }">
				<span class="pointer" @click="toAlbumDetail(row.al.id)">{{
            row.al.name
          }}</span>
			</template>
		</el-table-column>
		<el-table-column prop="dt" label="时长" width="100" v-if="!isPhone">
			<template v-slot="{ row }">
				{{ (row.dt / 1000) | timeFormat }}
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		props: {
			list: {
				type: Array,
				required: true,
				default: () => {}
			}
		},
		computed: {
			...mapState([
				'musicList',
				'currenMusicId',
				'isPlay',
				'isLogin',
				'isPhone'
			]),
			isDisplay() {
				return this.list ? true : false
			},
		},
		methods: {
			//  播放音乐
			playMusic(row) {
				console.log('列表没变', this.list == this.musicList)
				this.$store.dispatch('playMusic', {
					list: this.list,
					id: row.id
				})
			},
			/* 播放当前列表 */
			playMusicAll() {
				if (this.list.length == 0) return
				let id = this.list[0].id
				console.log('列表没变', this.list == this.musicList)
				this.$store.dispatch('playMusic', {
					list: this.list,
					id
				})
			},
			toMvDeTail(id) {
				if (typeof id === 'number') this.$router.push('/videodetail/mv/' + id)
			},
			toArtistDetail(id) {
				if (typeof id === 'number') this.$router.push('/artistdetail/' + id)
			},
			showCurren(id) {
				return this.currenMusicId === id
			},
			toAlbumDetail(id) {
				if (this.$route.path === '/albumdetail/' + id) return

				if (typeof id === 'number') this.$router.push('/albumdetail/' + id)
			},
		}
	}
</script>

<style lang="less" scoped>
	.vip-tag {
		display: inline-block;
		box-sizing: border-box;
		border: 1px solid #fe672e;
		border-radius: 2px;
		color: #fe672e;
		margin-left: 10px;
		height: 14px;
		padding: 0 2px;
		line-height: 1;
	}

	.active-color {
		color: #ec4141;
	}

	.artist-list {
		&::after {
			display: inline;
			margin: 2px;
			content: '/';
		}

		&:last-child::after {
			content: '';
		}
	}
</style>
